<!-- 用户管理 用户列表组件 -->
<template>
  <div class="">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator="/">
      <!-- <el-breadcrumb-item><a>用户管理</a></el-breadcrumb-item> -->
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <el-row :gutter="20">
        <!--部门数据 左侧数据-->
        <el-col :span="4" :xs="24">
          <div class="head-container">
          <!-- <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search"
                style="margin-bottom: 20px" /> -->
          </div>
          <div class="head-container">
            <el-tree @node-click="handleNodeClick" :data="deptOptions" :props="defaultProps" :filter-node-method="filterNode" ref="tree" :expand-on-click-node="false" node-key="id" default-expand-all highlight-current />
          </div>
        </el-col>
        <!--用户数据 右侧数据-->
        <el-col :span="20" :xs="24">
          <el-form ref="queryForm" :model="queryInfo" size="small" :inline="true" label-width="68px">
            <el-form-item label="登录账号" prop="loginName">
              <el-input v-model="queryInfo.loginName" placeholder="请输入登录账号" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="手机号码" prop="phonenumber">
              <el-input v-model="queryInfo.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="queryInfo.status" placeholder="用户状态" clearable style="width: 240px">
                <el-option label="正常" value="0">正常</el-option>
                <el-option label="停用" value="1">停用</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创建时间" prop="perms">
              <el-date-picker v-model="value1" value-format="yyyy-MM-dd hh:mm:ss" style=" width:240px" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>

          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addUserHandler">新增</el-button>
            </el-col>
            <el-col :span="1.5">
              <!-- <el-button type="success" plain icon="el-icon-edit" size="mini" @click="editUserHandler">修改</el-button> -->
            </el-col>
            <el-col :span="1.5">
              <!-- <el-button type="danger" plain icon="el-icon-delete" size="mini">删除</el-button> -->
            </el-col>
            <!-- <el-col :span="1.5">
              <el-button type="info" plain icon="el-icon-upload2" size="mini">导入</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="warning" plain icon="el-icon-download" size="mini">导出</el-button>
            </el-col> -->
            <!-- <right-toolbar @queryTable="getList" /> -->
          </el-row>

          <el-table :data="userList" @selection-change="handleSelectionChange">
          <!-- <el-table :data="userList"> -->
            <!-- <el-table-column type="selection" width="30" align="center" /> -->
            <el-table-column label="用户编号" align="center" prop="userId" />
            <el-table-column label="用户昵称" align="center" prop="userName" :show-overflow-tooltip="true" />
            <el-table-column label="登录账号" align="center" prop="loginName" :show-overflow-tooltip="true" />
            <el-table-column label="部门" align="center" prop="deptName" :show-overflow-tooltip="true" />
            <el-table-column label="手机号码" align="center" prop="phonenumber" width="120" />
            <el-table-column label="状态" align="center" key="status">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="userStateChanged(scope.row)" />
              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime" width="160">
              <template slot-scope="scope">
                <span>{{ (scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
              <template v-if="scope.row.userId !== 1" slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-edit" @click="editUserHandler(scope.row)">修改</el-button>
                <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteHandler(scope.row)">删除</el-button>
                <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)">
                  <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="handleResetPwd" icon="el-icon-key">重置密码</el-dropdown-item>
                    <el-dropdown-item command="handleUnblockUser" icon="el-icon-circle-check">分配角色</el-dropdown-item>
                    <el-dropdown-item command="handleCloseUser" icon="el-icon-circle-check">封禁用户</el-dropdown-item>
                    <el-dropdown-item command="handleOpenUser" icon="el-icon-circle-check">解封用户</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination 
          @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
            :current-page="queryInfo.currentPage" 
            :page-sizes="[10, 20, 30, 40]" 
            :page-size="queryInfo.pageSize" 
            layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </el-col>
      </el-row>
      <!-- 用户列表区域 假数据 -->
      <!-- border: 边框 stripe: 隔行变色 -->
    </el-card>

    <!-- 添加修改用户 弹窗 -->
    <el-dialog :title="upload.title" :visible.sync="dialogVisible" @close="addDialogClosed" width="600px">
      <!-- 内容主题区域 -->
      <el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户名称" prop="userName">
              <el-input v-model="addForm.userName" placeholder="请输入用户姓名" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="addForm.email" placeholder="请输入邮箱" maxlength="50" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phonenumber">
              <el-input v-model="addForm.phonenumber" placeholder="请输入手机号码" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :span="12" prop="remark">
            <el-form-item label="备注">
              <el-input v-model="addForm.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="登录账号" prop="loginName">
              <el-input v-model="addForm.loginName" placeholder="请输入登录账号" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色" prop="roleIds">
              <el-select v-model="addForm.roleIds" multiple placeholder="请选择角色">
                <el-option v-for="item in listOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item v-if="this.upload.title === '添加用户'" label="用户密码" prop="password">
              <el-input v-model="addForm.password" placeholder="请输入用户密码" type="password" show-password maxlength="20" />
          <!-- <el-input type="password" prefix-icon="el-icon-lock" v-model="loginForm.passWord" show-password></el-input>   显示隐藏密码 -->

            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户性别">
              <el-select v-model="addForm.sex" placeholder="请选择性别">
                <el-option v-for="item in listClassOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="addForm.status">
                <el-radio label="0">正常</el-radio>
                <el-radio label="1">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="归属部门" prop="deptId">
              <v-tree-select :data="deptOption" value-field-name="id" v-model="addForm.deptId"></v-tree-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户类型" prop="userType">
              <el-radio-group v-model="addForm.userType">
                <el-radio label="00">系统用户</el-radio>
                <el-radio label="01">注册用户</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="getMenuAllCheckedKeys">通过 node 获取</el-button> -->
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 封存用户弹窗 -->
    <el-dialog title="封禁用户" width="40%" :visible.sync="closeUserDialog" @close="closeUserDialogClosed">
      <!-- 内容主题区域 -->
      <el-form ref="closeUserFormRef" :model="closeUserForm" label-width="150px">
        <el-form-item size="large" label="封禁时间" prop="time">
          <el-input v-model="closeUserForm.time" placeholder="请输入封禁时间（s）" clearable style="width: 240px" @keyup.enter.native="handleQuery" /> 秒
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeUserDialog = false">取 消</el-button>
        <el-button type="primary" @click="closeUserConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 重置密码弹窗 -->
    <el-dialog title="重置密码" width="40%" :visible.sync="upsetPsdDialog" @close="closeUserDialogClosed">
      <el-form ref="closeUserFormRef" :model="UserPsdForm" label-width="150px">
          <el-form-item size="large" label="新密码" prop="time">
            <el-input v-model="UserPsdForm.password" placeholder="请输入新密码" show-password clearable style="width: 240px" type="password"   />
          </el-form-item>
        </el-form>
      <!-- <span class="spanStyle">
        确定重置密码为 000000 吗
      </span> -->
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="upsetPsdDialog = false">取 消</el-button>
        <el-button type="primary" @click="closeUpsetPwdConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 模态框组件封装 -->
    <!-- <Modal :title="title" :content="content" cancelText="取消" okText="确认" noticeText="知道了" mode="confirm" :type="type" :center="center" :loading="loading" @cancel="onCancel" @ok="onConfirm" v-show="showModal" /> -->
  </div>
</template>

<script>
import VTreeSelect from 'vue-treeselect'
// import Treeselect from '@riophae/vue-treeselect'
// import "@riophae/vue-treeselect/dist/vue-treeselect.css";
// import { getUserInfo } from '@/api/user/user.js'
// import Modal from '@/assets/style/ModalStyle.vue' // 模态框封装
export default {
  // 组件名称
  name: '',
  // 局部注册的组件
  components: {
    VTreeSelect 
    // Treeselect
    // Modal
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    // // 验证邮箱的规则 自定义校验规则
    // var checkEmail = (rule, value, cb) => {
    //   // 验证邮箱的正则表达式
    //   const regEmail = /^([a-zA-Z0-9])+@([a-zA-Z0-9])+(\.[a-zA-Z0-9_-])+/
    //   if (regEmail.test(value)) {
    //     // 合法的邮箱
    //     return cb()
    //   }
    //   cb(new Error('请输入合法的邮箱!'))
    // }
    // // 验证手机的规则
    // var checkMobile = (rule, value, cb) => {
    //   // 验证手机号的规则
    //   const regMobile =
    //     /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
    //   if (regMobile.test(value)) {
    //     return cb()
    //   }
    //   cb(new Error('请输入合法的手机号!'))
    // }
    return {
      userList: [],
      userPwdId: undefined,
      listClassOptions: [
        {
          value: '0',
          label: '男'
        },
        {
          value: '1',
          label: '女'
        },
      ],
      listOptions: [],
      // 查询参数
      queryParams: {
        userName: undefined,
        phonenumber: undefined,
        deptId: undefined,
        status: '0',
      },
      //  部门树选项
      deptOptions: [],
      deptOption:[],
      // 获取用户列表数据的参数对象
      queryInfo: {
        // query: '',
        // 当前的页数
        currentPage: 1,
        // 当前每页显示多少条数据
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        // deptId: undefined
        deptId: '101'
      },
      dateValue: '',
      value1: [],
      total: 0,
      defaultProps: {
        children: 'children',
        label: 'deptName',
      },
      // 部门名称 搜索
      deptName: undefined,
      // 对话框显示与隐藏
      dialogVisible: false,
      // 控制封存用户弹窗的显示与隐藏
      closeUserDialog: false,
      upsetPsdDialog: false,
      // 添加用户的表单数据
      addForm: {
      },
      roleIds: [],

      // 表单校验
      addFormRules: {
        userName: [
          { required: true, message: "用户名称不能为空", trigger: "blur" },
          { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
        ],
         deptId: [
          { required: true, message: "部门不能为空", trigger: "blur" },
        ],
        nickName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" }
        ],
        loginName:[
          { required: true, message: "登录账号不能为空", trigger: "blur" },
          { min: 2, max: 20, message: '登录账号长度必须介于 2 和 20 之间', trigger: 'blur' }
        ],
        password: [
          { required: true, message: "用户密码不能为空", trigger: "blur" },
          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
        ],
        email: [
        { required: true, message: "用户邮箱不能为空", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        phonenumber: [
        { required: true, message: "用户手机号不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        roleIds:[
        { required: true, message: "用户角色不能为空", trigger: "blur" },
        ],
        status:[
          { required: true, message: "用户状态不能为空", trigger: "blur" },
        ],
        userType:[
          { required: true, message: "用户类型不能为空", trigger: "blur" },
        ]

      },
      // 封存用户的表单数据
      closeUserForm: {
        time: null,
        loginId: null,
      },
      // 重置密码表单数据: 
      UserPsdForm:{
        password:null,
      },
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // // 设置上传的请求头部
        // headers: { Authorization: 'Bearer ' + getToken() },
        // // 上传的地址
        // url: process.env.VUE_APP_BASE_API + '/system/user/importData'
      },
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {
    // 根据名称筛选部门树
    deptName (val) {
      console.log(val, '111');
      this.$refs.tree.filter(val);
    },
  },
  // 生命周期钩子   
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，el属性还不存在
   */
  created () {
    this.getUserList()
    this.getRoleList()
    // this.openHandler()
    // this.getDepartments()
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted () {
    this.getList()
  },
  // 组件方法
  methods: {
    normalizer (node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        text: node.deptName,
        children: node.children
      };
    },
    /** 查询部门列表 */
    async getList() {
      const { data: res } = await this.$http.post('/sys-dept/page',
        this.queryParams,
      )
      if (res.code === 20000) {
        function convertToTreeData(data) {
        const treeData = [];

        function convert(dept) {
          const node = {
            id: dept.deptId,
            text: dept.deptName,
            children: []
          };

          if (dept.children && dept.children.length > 0) {
            dept.children.forEach(child => {
              node.children.push(convert(child));
            });
          }

          return node;
        }

      data.forEach(root => {
        treeData.push(convert(root));
      });
      return treeData;
      }
        this.deptOptions = res.data
        this.deptOption = convertToTreeData(res.data)
        if (res.data.length > 0) {
          //'nextTick()' 下次dom更新时触发回调函数
          //默认点击 第一个节点的子节点
          this.$nextTick().then(() => {
            // const firstNode = document.querySelector('.el-tree-node')
            // firstNode.click();
            document.querySelector('.el-tree-node').click()
          })
        }
      } else {
        this.$message.error(res.msg)
      }
    },
    // 角色 下拉列表
    async getRoleList () {
      const { data: res } = await this.$http.get('/sys-role/list')
      if (res.code === 20000) {
        // console.log(this.queryParams);
        this.listOptions = res.data
      }
    },
    // 筛选节点
    filterNode (value, data) {
      console.log(value, data);
      if (!value) return true;
      this.getList()
      // return data.label.indexOf(value) !== -1;
    },
    // 查询用户列表
    async getUserList () {
      // console.log(this.queryInfo);
      this.queryInfo.createTimeOpen = this.value1[0]
      this.queryInfo.createTimeClose = this.value1[1]
      const { data: res } = await this.$http.post('/sys-user/page', this.queryInfo)
      if (res.code === 20000) {
        console.log(res.data.total);
        this.userList = res.data.records
        this.total = Number(res.data.total)
      } else {
        this.$message.error(res.msg)
      }
    },
    getMenuAllCheckedKeys () {
      // console.log(this.$refs.menu.getCheckedNodes());
      // let checkedKeys = this.$refs.menu.getCheckedNodes();
      // let arr = []
      // checkedKeys.map(item => {
      //   console.log(item.deptId);
      //   arr.push(item.deptId)
      // })
      // return arr
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryInfo.deptId = data.deptId
      // console.log(this.queryInfo.deptId, 11);
      this.handleQuery()
    },
    nodeClick(data) {
      // console.log(data);
    },

    // 监听 pagesize 改变的事件
    handleSizeChange (newSize) {
      console.log(newSize)
      this.queryInfo.pageSize = newSize
      this.getUserList()
    },
    // 监听页码值改变的事件
    handleCurrentChange (newPage) {
      console.log(newPage)
      this.queryInfo.currentPage = newPage
      this.getUserList()
    },
    // 监听 switch 开关的状态
    async userStateChanged (row) {
      // console.log(row.status)
      const params = {
        status: row.status,
        userId: row.userId.toString(),
        version: row.version,
      }
      const { data: res } = await this.$http.get('/sys-user/updateStatus', {
        params,
      })
      if (res.code === 20000) {
        // this.queryInfo.state = row.state
        // row.status = row.status === true ? "1" : "0";
        return this.$message.success('更新用户状态成功!')
      }
      this.$message.error(res.msg)
    },
    // 监听添加用户对话框关闭事件
    addDialogClosed () {
      // 重置表单
      this.$refs.addFormRef.resetFields()
      this.addForm.deptId=null
      this.addForm.phonenumber=null
    },
    // 监听封存用户对话框关闭事件
    closeUserDialogClosed () {
      // 重置表单
      this.$refs.closeUserFormRef.resetFields()
    },
    // 添加按钮 添加新用户
    addUser () {
      this.$refs['addFormRef'].validate(async valid => {
        if (valid) {
          if (this.addForm.userId !== null) {
            // this.addForm.roleIds = [parseInt(this.roleIds)]
            const { data: res } = await this.$http.post('/sys-user/update', this.addForm)
            if (res.code === 20000) {
              this.$message.success(`修改成功!`)
              this.getUserList()
              this.dialogVisible = false
              this.addForm.userId = undefined
            } else {
              this.$message.error(res.msg)
            }
          } else {
            // this.addForm.roleIds = [parseInt(this.roleIds)]
            const { data: res } = await this.$http.post('/sys-user/insert', this.addForm)
            if (res.code === 20000) {
              console.log(res);
              this.$message.success(`新增成功!`)
              this.getUserList()
              this.dialogVisible = false
              this.$refs.addFormRef.resetFields()
            } else {
              this.$message.error(res.msg)
            }
          }
        }
      })
    },
    reset() {
      this.addForm = {
        userId: null,
        deptId: null,
        userName: null,
        nickName: null,
        password: null,
        phonenumber: null,
        email: null,
        sex: null,
        status: "0",
        userType:'01',
        radio: 1,
        remark: null,
        postIds: [],
      }
    },
    // 新增用户按钮 打开弹窗
    addUserHandler () {
      this.reset();
      this.dialogVisible = true
      this.upload.title = "添加用户"
      this.nodeClick()
       this.addForm.deptId = this.queryInfo.deptId
    },
    // 修改按钮 修改用户
    editUserHandler (row) {
      this.dialogVisible = true
      this.upload.title = '修改用户'
      // this.getUserList()
      // this.$set(this.addForm, "roleIds", res.data.records.roleIds);
      // 数据会回显到列表上 该怎么解决？ 因为公用一个地址，所以他会同用一个地址源，用深拷贝解决
      this.addForm = {
        ...row
      }
      console.log(row);
    },
    // 删除封装
    async deleteHandler(row) {
      if (!(await this._box(row.userId, 'post', '/sys-user/delete'))) return;
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 更多操作触发
    handleCommand (command, row) {
      switch (command) {
        case 'handleResetPwd':
          this.handleResetPwd(row)
          break
        case 'handleUnblockUser':
          this.handleUnblockUser(row)
          break
        case 'handleCloseUser':
          this.handleCloseUser(row)
          break
        case 'handleOpenUser':
          this.handleOpenUser(row)
          break
        default:
          break
      }
    },
    /** 重置密码 */
    handleResetPwd (row) {
      console.log(row.userId);
      this.userPwdId = row.userId
      this.upsetPsdDialog = true
    },
    // 重置密码 确定按钮
    async closeUpsetPwdConfirm () {
      const params = {
        // password: '000000',
        password: this.UserPsdForm.password,
        userId: this.userPwdId
      }
     
      const { data: res } = await this.$http.post('/sys-user/rePwd', params)
      if (res.code === 20000) {
        this.upsetPsdDialog = false
        return this.$message.success('重置密码成功!')
      } else {
        this.$message.error(res.message)
      }
    },
    // 封禁用户 打开按钮
    handleCloseUser (row) {
      this.closeUserDialog = true
      this.closeUserForm.loginId = row.loginName
    },
    // 封禁用户 确定按钮
    async closeUserConfirm () {
      const { data: res } = await this.$http.get(`/context/disable/${this.closeUserForm.loginId}/${this.closeUserForm.time}`)
      if (res.code === 20000) {
        this.closeUserDialog = false
        return this.$message.success('封禁用户成功!')
      } else {
        return this.$message.error(res.message)
      }
    },
    // 解封用户
    async handleOpenUser (row) {
      console.log(row.loginName);
      const loginId = row.loginName
      const { data: res } = await this.$http.get(`/context/untieDisable/${loginId}`)
      if (res.code === 20000) {
        return this.$message.success('解除封禁成功!')
      } else {
        this.$message.error(res.msg)
      }
      // this.$message({
      //   message: '解封成功',
      //   type: 'success',
      //   center: true,
      // })
    },
    // 分配角色
    handleUnblockUser (row) {
      this.$router.push({ path: '/selectUser', query: { userId: row.userId, loginName: row.loginName, userName: row.userName } })
    },
    // 搜索按钮操作
    handleQuery () {
      this.queryInfo.currentPage = 1
      this.getUserList()
    },
    // 重置按钮操作
    resetQuery () {
      // this.resetForm('queryForm')
      // console.log(this) this指向$refs的是通过ref获得的实例对象loginFormRef
      this.$refs.queryForm.resetFields()
      this.value1 = []
      this.handleQuery()
    },
    // 展开
    // openHandler() {
    //   let treeList = this.deptOptions;
    //   for (let i = 0; i < treeList.length; i++) {
    //     this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
    //   }
    // }
  },

}
</script>

<style scoped lang="less">
// 表格样式
.el-table {
  margin-top: 15px;
  font-size: 12px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}

.spanStyle {
  font-size: 18px;
  display: flex;
  justify-content: center;
  color: red;
}

.menuBox {
  width: 100%;
  height: 100%;
  border: 1px solid gray;
}
</style>
